<script setup lang="ts">
import { type VbenFormProps } from '@vben/common-ui';
import { Page } from '@vben/common-ui';

import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { getAllProduct } from '#/api/core/product';

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,

  schema: [
    {
      // 组件需要在 #/adapter.ts内注册，并加上类型
      component: 'Input',
      // 对应组件的参数
      componentProps: {
        placeholder: '请输入订单编号',
      },
      // 字段名
      fieldName: 'productName',
      // 界面显示的label
      label: '订单编号',
    },
    {
      // 组件需要在 #/adapter.ts内注册，并加上类型
      component: 'RangePicker',
      // 对应组件的参数
      // 字段名
      fieldName: 'date',
      // 界面显示的label
      label: '佣金产生时间',
    },
  ],
  // 是否可展开
  showCollapseButton: false,
  submitOnChange: true,
  submitOnEnter: false,
  wrapperClass: 'grid-cols-1 md:grid-cols-4',
};

const gridOptions: VxeGridProps = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'id', title: 'ID' },
    { field: 'ID1', title: '会员ID' },
    { field: 'yhm', title: '用户名' },
    { field: 'ddbh', title: '订单编号' },
    { field: 'yjje', title: '佣金金额' },
    { field: 'yjly', title: '佣金来源' },
    { field: 'ddzt', title: '订单状态' },
    { field: 'cssj', title: '产生时间' },
  ],
  editConfig: {
    mode: 'row',
    trigger: 'click',
  },
  height: 'auto',
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    response: {
      result: 'list',
      total: 'total',
      list: 'list',
    },
    ajax: {
      query: async ({ page }) => {
        const res = await getAllProduct({
          currentPage: page.currentPage,
          pageSize: page.pageSize,
          filter: {},
        });
        // return res.data;
        return [];
      },
    },
  },
  showOverflow: false,
};

const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
</script>

<template>
  <Page auto-content-height title="抖音佣金">
    <Grid />
  </Page>
</template>

<style lang="scss" scoped></style>
